<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 图案样式
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = "../images/indata-log.jpg";
        // 这里注意，在将创建图案模式时，一定要将图片加载完成再去创建，否则很可能显示不出来图案
        img.onload = function () {
            // 创建图案模式，第一个参数可以是img元素，也可以是canvas元素，第二个参数和css的backgroundRepeat属性一样有四个：repeat、repeat-x、repeat-y、no-repeat
            // const imagesPattern = ctx.createPattern(img, "repeat-x");
            // const imagesPattern = ctx.createPattern(img, "repeat-y");
            const imagesPattern = ctx.createPattern(img, "no-repeat");
            // const imagesPattern = ctx.createPattern(img, "repeat");

            ctx.fillStyle = imagesPattern;
            ctx.fillRect(0, 0, 150, 150);

            // 说明：这里的图案模式作为矩形的填充样式不是按照坐标去重复排序的，而是像矩形裁剪图片一样展示，打开这一个就可以观察的很仔细
            // ctx.fillStyle = imagesPattern;
            // ctx.fillRect(10, 10, 150, 150);
        }
    };
</script>
</body>
</html>